<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			p {
				text-indent: 22px;
			}
			
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			
			.mui-off-canvas-right {
				color: #fff;
			}
			
			.title {
				margin: 35px 15px 10px;
			}
			
			.title+.content {
				margin: 10px 15px 35px;
				color: #bbb;
				text-indent: 1em;
				font-size: 14px;
				line-height: 24px;
			}
			
			input {
				color: #000;
			}
		</style>
	</head>

	<body>
		<!--侧滑菜单容器-->
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
			<!--菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-right">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="title">部位选择</div>
						<div class="content">
							可以单个部位或者多个部位一起计算
							
							<p style="margin: 10px 15px;">
								<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">确定选择</button>
							</p>

						</div>
						
						<div class="mui-input-row mui-checkbox">
							<label>主卧</label>
							<input name="checkbox1" value="Item 3" type="checkbox">
						</div>
						<div class="mui-input-row mui-checkbox">
							<label>客厅</label>
							<input name="checkbox1" value="Item 4" type="checkbox" checked>
						</div>
						<div class="mui-input-row mui-checkbox">
							<label>厨房</label>
							<input name="checkbox1" value="Item 5" type="checkbox">
						</div>
						
					</div>

				</div>
			</aside>
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
					<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
					<h1 class="mui-title">装修计算器</h1>
				</header>
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-content-padded">
							<p style="padding: 5px 20px;margin-bottom: 5px;">
								<button id="offCanvasShow" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 5px;">
									选择需要计算的部位
								</button>
							</p>
						</div>
						<div class="mui-card">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-collapse mui-active">
									<a class="mui-navigate-right" href="#">地板用量计算工具</a>
									<div class="mui-collapse-content">
										<form class="mui-input-group">
											<div class="mui-input-row">
												<label>房间长度</label>
												<input type="text" placeholder="普通输入框" value="10">
											</div>
											<div class="mui-input-row">
												<label>房间宽度</label>
												<input type="text" placeholder="普通输入框" value="5">
											</div>
											<div class="mui-input-row">
												<label>地板长度</label>
												<input type="text" placeholder="普通输入框" value="600">
											</div>
											<div class="mui-input-row">
												<label>地板宽度</label>
												<input type="text" placeholder="普通输入框" value="90">
											</div>
											<div class="mui-input-row">
												<label>计算结果</label>
												<input type="text" class="mui-input-clear" placeholder="您需要的地板块数" value="972">
											</div>
											<div class="mui-button-row">
												<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">计算</button>&nbsp;&nbsp;
												<button class="mui-btn mui-btn-danger" type="button" onclick="return false;">重置</button>
											</div>
										</form>
									</div>
								</li>
								<li class="mui-table-view-cell mui-collapse">
									<a class="mui-navigate-right" href="#">地砖用量计算工具</a>
									<div class="mui-collapse-content">
										<form class="mui-input-group">
											<div class="mui-input-row">
												<label>房间长度</label>
												<input type="text" placeholder="普通输入框" value="10">
											</div>
											<div class="mui-input-row">
												<label>房间宽度</label>
												<input type="text" placeholder="普通输入框" value="5">
											</div>
											<div class="mui-input-row">
												<label>地板长度</label>
												<input type="text" placeholder="普通输入框" value="600">
											</div>
											<div class="mui-input-row">
												<label>地板宽度</label>
												<input type="text" placeholder="普通输入框" value="90">
											</div>
											<div class="mui-input-row">
												<label>计算结果</label>
												<input type="text" class="mui-input-clear" placeholder="您需要的地板块数" value="972">
											</div>
											<div class="mui-button-row">
												<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">计算</button>&nbsp;&nbsp;
												<button class="mui-btn mui-btn-danger" type="button" onclick="return false;">重置</button>
											</div>
										</form>
									</div>
								</li>
								
							</ul>
						</div>

						<form class="mui-input-group" style="margin-bottom: 15px;display: none;">
							<div class="mui-input-row mui-radio">
								<label>主界面移动、菜单不动</label>
								<input name="style" type="radio" value="main-move">
							</div>
							<div class="mui-input-row mui-radio">
								<label>主界面不动、菜单移动</label>
								<input name="style" type="radio" checked="" value="menu-move">
							</div>
							<div class="mui-input-row mui-radio mui-hidden" id="move-togger">
								<label>整体移动</label>
								<input name="style" type="radio" value="all-move">
							</div>
							<div class="mui-input-row mui-radio">
								<label>缩放式侧滑（类手机QQ）</label>
								<input name="style" type="radio" value="main-move-scalable">
							</div>
						</form>

					</div>
				</div>
				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack: false,
			});
			//侧滑容器父节点
			var offCanvasWrapper = mui('#offCanvasWrapper');
			//主界面容器
			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
			//菜单容器
			var offCanvasSide = document.getElementById("offCanvasSide");
			//Android暂不支持整体移动动画
			if(!mui.os.android) {
				document.getElementById("move-togger").classList.remove('mui-hidden');
				var spans = document.querySelectorAll('.android-only');
				for(var i = 0, len = spans.length; i < len; i++) {
					spans[i].style.display = "none";
				}
			}
			//移动效果是否为整体移动
			var moveTogether = false;
			//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
			var classList = offCanvasWrapper[0].classList;
			//变换侧滑动画移动效果；
			mui('.mui-input-group').on('change', 'input', function() {
				if(this.checked) {
					offCanvasSide.classList.remove('mui-transitioning');
					offCanvasSide.setAttribute('style', '');
					classList.remove('mui-slide-in');
					classList.remove('mui-scalable');
					switch(this.value) {
						case 'main-move':
							if(moveTogether) {
								//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
								offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
								moveTogether = false;
							}
							break;
						case 'main-move-scalable':
							if(moveTogether) {
								//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
								offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
							}
							classList.add('mui-scalable');
							break;
						case 'menu-move':
							classList.add('mui-slide-in');
							break;
						case 'all-move':
							moveTogether = true;
							//整体滑动时，侧滑菜单在inner-wrap内
							offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
							break;
					}
					offCanvasWrapper.offCanvas().refresh();
				}
			});
			document.getElementById('offCanvasShow').addEventListener('tap', function() {
				offCanvasWrapper.offCanvas('show');
			});
			document.getElementById('offCanvasHide').addEventListener('tap', function() {
				offCanvasWrapper.offCanvas('close');
			});
			//主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
			//实现ios平台的侧滑关闭页面；
			if(mui.os.plus && mui.os.ios) {
				offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
				offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件
					plus.webview.currentWebview().setStyle({
						'popGesture': 'close'
					});
				});
			}
		</script>
	</body>

</html>